<template>
  <div>
    <!-- 标签的table组件 -->
    <Table :data="list">
      <template #q="obj">
        {{ obj.row.id }}
        <button @click="ff(obj.row)">查看</button>
        <button @click="fn(obj.row.id)">删除</button>
      </template>
    </Table>

    <Kan width="300px" heigth="300px" :flag="flag">
      <template>
        姓名：<input type="text" v-model="Data.name" /> <br />
        年龄： <input type="text" v-model="Data.age" />

        <button @click="fh">取消</button>
        <button @click="fg(Data.id)">修改</button>
      </template>
    </Kan>
  </div>
</template>
<script>
import Table from './Anli/Table.vue'
import Kan from './Anli/Kan.vue'

export default {
  name: '',
  components: {
    Table,
    Kan

  },
  data () {
    return {
      flag: false,
      Data: {
        id: '',
        name: '',
        age: ''
      },
      list: [
        { id: 1, name: '要要小姐姐', age: 18 },
        { id: 2, name: '帅帅小鸽鸽', age: 28 },
        { id: 3, name: '超超小帅哥', age: 38 }
      ]
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    fn (id) {
      this.list = this.list.filter(item => item.id != id)
    },
    ff (e) {
      this.flag = true
      this.Data = JSON.parse(JSON.stringify(e))
    },
    fh () {
      this.flag = false
    },
    fg (id) {
      let aa = this.list.find(item => item.id == id)
      aa.name = this.Data.name
      aa.age = this.Data.age
      this.flag = false
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
